<template>
  <div id="page">
    <!-- 顶部 -->
    <div id="header_top">
      <p class="iconfont">&#xe6bc;</p>
      <p>商品搜索</p>
      <p>
        <span class="iconfont">&#xf0112; </span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>
    </div>

    <!-- 搜索 -->
    <form action="">
      <input
        v-model="msg"
        type="text"
        name=""
        id=""
        class="iconfont"
        placeholder="按内容搜索"
      />
    </form>

    <!-- 导航 -->
    <!-- <nav>
            <ul>
                <li class="cur">
                    <a href="#">综合推荐</a>
                </li>
                <li><a href="#">销量</a></li>
                <li>
                    <a href="#" class="iconfont">价格&#xe606;</a>
                </li>
                <li><a href="#">好评度</a></li>
                <li><a href="#">店铺</a></li>
            </ul>
            <p>
                <span class="iconfont">&#xe611;</span>
                筛选
            </p>
        </nav> -->

    <!-- 筛选 -->
    <!-- <div id="screen">
            <p>筛选11.11大促销商品</p>
        </div> -->

    <!-- 内容 -->
    <main>
      <ul v-if="list.length > 1">
        <li v-for="item in list" :key="item.id" @click="detail(item.id)">
          <div class="left">
            <img :src="$pre + item.img" alt="" />
          </div>
          <div class="right">
            <p>{{ item.goodsname }}</p>
            <p>净透毛孔，温和不紧绷，清爽控油</p>
            <p>
              <i>￥</i>
              <span>{{ item.price }}</span>
              <del>￥{{ item.market_price }}</del>
              <i>999人已付款</i>
            </p>
            <p>11.11限时299元起</p>
            <p>999条评价 99.99%好评</p>
          </div>
        </li>
      </ul>
      <div v-else><van-empty description="描述文字" /></div>
    </main>
  </div>
</template>

<script>
import { search, getgoodlist } from "../../utils/api";
export default {
  data() {
    return {
      msg: "",
      list: [],
    };
  },
  watch: {
    msg() {
      search({ keywords: this.msg }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.list = res.data.list ? res.data.list : [];
        }
      });
    },
  },
  mounted() {
    getgoodlist({
      cateid: this.$route.query.id,
      type: this.$route.query.type,
    }).then((res) => {
        if(res.data.code==200){
            this.list = res.data.list.goodData ? res.data.list.goodData : [];
        }
      
    });
  },
  methods:{
    //   点击商品跳转详情
      detail(id){
          this.$router.push('/detail?id='+id)
      }
  }
};
</script>

<style scoped src='../../assets/css/shop_list.css'>
</style>